import type { FC } from 'react';
import { useMemo, useEffect, useRef } from 'react';
import { Modal } from 'antd';
import { useSafeState, useMemoizedFn } from 'ahooks';
import Actions from './Actions';
import Context from './context';
import Scrollbars from './Scrollbars';
import EditCanvasSize from './EditCanvasSize';
import Canvas, { type CanvasRefs } from './Canvas';
import { ActionEnums } from './Actions/enum';
import { getMaxRowCol, listsTransform, toList } from './helper';
import type { ContextTypes, CanvasSize, SeatEditorProps, SeatDatas } from './types';
import styles from './styles.module.less';

const seatSize = 36;

const SeatEditor: FC<SeatEditorProps> = (props) => {
  const { initSeats } = props;
  const canvasRef = useRef<CanvasRefs>(null);

  const _initSeats = useMemo(() => {
    return listsTransform(initSeats);
  }, [props.initSeats]);

  const [mode, setMode] = useSafeState(ActionEnums.DRAW_SEAT);

  const [seats, setSeats] = useSafeState<SeatDatas>(_initSeats);
  const [selectedSeats, setSelectedSeats] = useSafeState<SeatDatas>();

  const initSize = useMemo(() => getMaxRowCol(initSeats), [initSeats]);
  const [canvasSize, setCanvasSize] = useSafeState<CanvasSize>(initSize);

  const [showModal, setShowModal] = useSafeState(false);

  const handleMode = useMemoizedFn((mode: number) => {
    setMode(mode);
    if (mode === ActionEnums.ADD_CANVAS_SIZE) {
      setShowModal(true);
    }
  });

  const closeModal = useMemoizedFn(() => {
    setShowModal(false);
    setMode(ActionEnums.DRAW_SEAT);
  });

  const updateCanvasSize = useMemoizedFn((size: CanvasSize) => {
    const _cols = +size.cols;
    const _rows = +size.rows;

    if (_cols < canvasSize.cols) {
      Modal.error({
        title: '扩展画布失败',
        content: '列数不能小于' + canvasSize.cols
      });
      return;
    }

    if (_rows < canvasSize.rows) {
      Modal.error({
        title: '扩展画布失败',
        content: '排数不能小于' + canvasSize.rows
      });
      return;
    }

    closeModal();
    setCanvasSize({
      cols: _cols,
      rows: _rows
    });
  });


  useEffect(() => {
    const canvas = canvasRef.current;
    
    const news: any[] = [];
    const update: any[] = [];
    const del: any[] = canvas?.getDelDeats() || [];

    toList(seats).forEach(item => {
      if (!item.id) {
        news.push(item);
      } else {
        if (item.updated) {
          update.push(item);
        }
      }
    });

    console.log({
      del,
      update,
      news,
    })
  }, [seats]);

  const contextValue = useMemo(() => (
    {
      mode,
      seats,
      setSeats,
      seatSize,
      selectedSeats,
      setSelectedSeats,
      ...canvasSize,
    } as ContextTypes
  ), [mode, seats, selectedSeats, canvasSize]);

  return (
    <Context.Provider value={contextValue}>
      <div className={styles.container}>
        <div className={styles.toolbar}>
          <Actions
            value={mode}
            onChange={handleMode}
          />
        </div>
        <div className={styles.stage}>舞台方向</div>
        <div className={styles.workspace}>
          <Scrollbars>
            <Canvas ref={canvasRef} />
          </Scrollbars>
        </div>
      </div>
      <EditCanvasSize
        open={showModal}
        onClose={closeModal}
        initialValues={canvasSize}
        onSubmit={updateCanvasSize}
      />
    </Context.Provider>
  );
}

export default SeatEditor;